<template>
  <div class="opgc_main">
  <div class="main_bg">
    <div class="opgc_header">
      <div class="fixed_box">
        <div class="fixed_header pt10">
          <div class="header_min c333">
            <div class="top">
              <div class="pets_type fl">
                <img
                  src="https://static.epetbar.com/epet_wap_img/opgc/position.png"
                  class="pet_position"
                />
                <span class="ft14 cfff">狗狗</span>
                <img
                  src="https://static.epetbar.com/epet_wap_img/opgc/new_changePet.png"
                />
              </div>
              <div class="search_max fl">
                <div class="search c666">
                  <img
                    src=""
                  />
                  <span>枫趣暴走汪星人</span>
                </div>
              </div>
              <div class="news fr ml10">
                <a
                  href="https://wap.epet.com/app/standletter/notice"
                  class="db"
                  ><img
                    src="https://static.epetbar.com/epet_wap_img/opgc/main_9.png"
                /></a>
              </div>
              <div class="news fr">
                <a
                  href="https://wap.epet.com/zt/knowledge/favorites.html?fw0"
                  class="db"
                  ><img
                   src="https://static.epetbar.com/epet_wap_img/opgc/xms_file.png"
                /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <div class="pl20 pr20 pb10 pt10">
            <div class="shadow-box bgfff round15 w100">
              <div>
                <div class="flex pb15 pl15 pr15 pt15">
                  <img
                    src="https://static.epetbar.com/epet_wap_img/opgc/zms_avatar_dog.png"
                    width="56px"
                    height="56px"
                    class="round50"
                  />
                  <div class="it1 ml10">
                    <p class="bold ft15 mt5">添加宠物</p>
                    <div class="ft12 c666">定制养宠干货</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="transformBg">
    <div class="pt10 pb10 pl10 pr10 flex">
      <div class="it1 ftc db">
        <router-link to="/ifCanEat">
          <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_9.png"
          height="56"
        />
        </router-link>        
      </div>
      <div class="it1 ftc db">
        <router-link to="/ifCanDo">
          <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_8.png"
          height="56"
        />
        </router-link>
      </div>
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_7.png"
          height="56"
        />
      </div>
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_6.png"
          height="56"
        />
      </div>
    </div>
    <div class="pb20 pl10 pr10 flex">
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_5.png"
          height="56"
        />
      </div>
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_11.png"
          height="56"
        />
      </div>
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_3.png"
          height="56"
        />
      </div>
      <div class="it1 ftc db">
        <img
          src="https://static.epetbar.com/epet_wap_img/opgc/xms_4.png"
          height="56"
        />
      </div>
      
    </div>
    <div class="xms-adv pt15 pr15 pl15" style="height:125px">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in advs" :key="index" >
          <img :src="item.img_url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    

  </div>

    <van-tabs @click="clickhander()">
      <van-tab v-for="(item,index) in column" :title="item.name" :key="index">
        <!-- <div class="container">
          <div class="item" v-for="(value,index) in list" :key="index">
              <div class="item__content" >
                  <img :src="value.data.cover.img_url" alt="">
              </div>
          </div>
          <div class="item">
              <div class="item__content">
                    <img src=''>
              </div> 
          </div>
        </div>  -->
        <div class="aaaa">
          <div v-for="(value,index) in img_url" :key="index">    
            <div >
              <!-- <img v-for="(it,index) in value.data" :key="index" :src="it.img_url" alt=""> -->
              <!-- {{value.data.cover}} -->
              <img :src="value" alt="">
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>

  
</template>



<script>
import footerNav from '../../components/nav/footer.vue';
import Vue from 'vue';
import { Swipe, SwipeItem, Tab, Tabs } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Tab);
Vue.use(Tabs);

export default {
    data(){
      return{
        advs:[],
        column:[],
        list:[],
        img_url:[]
      }
    },
    components:{
        'footer-nav':footerNav
    },
    methods:{
      clickhander(a) {
        // console.log(a);
      }
    },
    async mounted() {
      let result = await this.$http.get({
        url:'/content/opgc/IndexV3.html',
        params:{
          do: 'GetList',
          param: 0,
          page: 1,
          pet_type: 'dog',
          system: 'wap',
          isWeb: 1,
          version: 517,
          distinct_id: '1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca'
        }
      })
      console.log(result);
      this.advs = result.data.advs
      this.column = result.data.column
      this.list = result.data.list
      console.log(this.list);
      var str = ""
      this.list.map(function(e){
        // str += e.img_url + ","
        // console.log(0);
        console.log(e.data.cover.img_url);
        // console.log(1);
        // this.img_url.push(e.data.cover.img_url)
      })
      // console.log(this.img_url);
      // window.console.log(str);
    }
};
</script>

<style scoped lang = "stylus">
.aaaa
  img 
    width 2rem
    height 2rem
.container
  column-count: 2 //多列的列数
  column-gap: 0//列间距
  /* display flex */
  img 
    width 2rem
    height 2rem

.item
  break-inside: avoid;//避免在主体框中插入任何中断（页面，列或区域）

.van-tabs__wrap
  background-color red
.my-swipe .van-swipe-item 
    width 3.45rem
    height 1.1rem
    img 
      width 100%
      border-radius .15rem .15rem .15rem .15rem

  
.xms-adv{
    /* background: #f3f4f5; */
    border-radius: 15px 15px 0 0;
    margin-top: -15px;
}
.db {
  display: block;
}
.ftc {
  text-align: center;
}
  @supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {
.fullscreen {
    /* 适配齐刘海 */
    padding-top: 20;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    
    /* 适配底部小黑条 */
    padding-bottom: 0;
    padding-bottom: costant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
}
.transformBg{background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f4f5));background: linear-gradient(#fff, #f3f4f5);
}
.shadow-box{-webkit-box-shadow: 0 0 10px -3px #d7d7d7;box-shadow: 0 0 10px -3px #d7d7d7;
}
.round15{border-radius: 15px;
}
.main_bg {width: 100%;background: url('http://static.epetbar.com/epet_wap_img/opgc/xms_newbg.png');background-size: 100% 100%;
}
.maindog-bg{width: 100%;padding: 30px 0;background: url('https://static.epetbar.com/epet_wap_img/opgc/xms_bg_dog.png');background-size: 100% 100%;
}
.maincat-bg{width: 100%;padding: 30px 0;background: url('https://static.epetbar.com/epet_wap_img/opgc/xms_bg_cat.png');background-size: 100% 100%;
}
.xms-adv{/* background: #f3f4f5; */border-radius: 15px 15px 0 0;margin-top: -15px;
}
    /*头部*/
.opgc_main{
    	width:100%;
}
.nav .vux-fixed{background: #f3f4f5;
}
.opgc_header,.nav .vux-fixed{
        width:100%;
        font-family:SourceHanSansCN-Medium;
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-right: env(safe-area-inset-right);
}
.opgc_header>div.fixed_box{
        width:100%;
        height:50px;
}
.opgc_header .fixed_header{
        width:100%;
        /* background: #fff; */
        /* border-bottom: 1px solid #F3F4F5; */
}
.opgc_header .header_min{
        width:92%;
        margin:0 auto;
}
.opgc_header .fixed{
        position: fixed;
        top:0;
        left: 0;
        z-index: 888;
}
.opgc_header .top{
        overflow:hidden;
        width:100%;
        height:30px;
        margin-bottom: 10px;
        /* margin-top:10px; */
}
    /*切换猫狗*/
.opgc_header .pets_type img{
        width:6px;
        height:4px;
}
.opgc_header .pets_type .pet_position{
        width:13px;
        height:16px;
        position: relative;
        bottom:1px;
}
    /*头部搜索和信息*/
.opgc_header .search_max{
        width: calc(100% - 122px);
        text-align: center;
}
.opgc_header .search{
        display: inline-block;
        width: calc(100% - 20px);
        height:30px;
        background:rgba(240,240,240,1);
        opacity:0.8;
        border-radius:30px;
        line-height: 30px;
        padding:0 15px;
        text-align: left;
}
.opgc_header .search>img{
        width:14px;
        position: relative;
        bottom: 1px;
}
.opgc_header .search>span{
        font-size:11px;
        font-weight:300;
        margin-left: 6px;
        font-family:MicrosoftYaHeiLight;
}
.opgc_header .news{
        width:24px;
        height: 22px;
        margin-top: 3px;
}
.opgc_header .news img{
        width:100%;
        vertical-align: top;
}
    /*导航条*/
.opgc_header .nav{
        overflow:hidden;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        font-weight:400;
        font-size: 12px;
}
.opgc_header .nav li{
        height:30px;
        line-height: 24px;
        font-size: 12px;
}
    /* .opgc_header .nav>li.active{
        font-weight:500;
        font-size: 15px;
        font-weight: bold;
    }
    .opgc_header .nav>li.active::after{
        content:'';
        display: block;
        width:14.5px;
        height:5px;
        margin:1px auto 0;
        background: url('./images/main_13.png') center center no-repeat;
        border-radius:5px;
    } */
    /*收藏为空的占位图*/
.nothing{position: fixed;width: 100%;top:30%;left: 0;
}
.nothing>div.go_login{width:101px;height:35px;border:1px solid #41c856;line-height: 35px;color:#41c856;text-align: center;border-radius: 20px;margin:15px auto;
}
.cB7{color:#B7B7B7;
}
.opgc_main .swiper-slide .pet_list{color: #333;/* transition: 300ms; */-webkit-transform: scale(0.55);transform: scale(0.55);
}
.opgc_main .swiper-slide-active .pet_list{-webkit-transform: scale(1);transform: scale(1);
}
.advSwiper .swiper-pagination-bullet{background:transparent;opacity:.9;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;border:1px solid #fff;
}
.advSwiper .swiper-pagination-bullet{width:6px;height:6px;
}
.advSwiper .swiper-pagination-bullet-active{background:#fff;width:16px;border-radius:30px;
}
.pet-swiper .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{opacity: 0;
}
.pet-swiper .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background: none;width: 15px;height: 15px;border-right: 2px solid #999;border-top: 2px solid #999;-webkit-transform: rotate(45deg);transform: rotate(45deg);outline: none;cursor: none;margin-top: -15px;
}
.pet-swiper .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background: none;width: 15px;height: 15px;border-right: 2px solid #999;border-top: 2px solid #999;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);outline: none;cursor: none;margin-top: -15px;
}
.opgc_main .vux-tab{background: #f3f4f5;height: 44px;
}
.opgc_main .vux-tab .vux-tab-item{background: none;font-size: 12px;
}
.opgc_main .vux-tab .vux-tab-item.vux-tab-selected{font-size: 15px;font-weight: bold;
}
.opgc_main .vux-tab .vux-tab-item.vux-tab-selected::after{
        content:'';
        display: block;
        width:14.5px;
        height:5px;
        margin:-10px auto;
        background: url('http://static.epetbar.com/epet_wap_img/opgc/xms_newbg.png') center center no-repeat;
        border-radius:5px;
}
.opgc_main .swiper-slide-next,.opgc_main .swiper-slide-prev{-webkit-transform: scale(0.9);transform: scale(0.9)
}
.bold {
  font-weight: 700;
}
.main {
  max-width: 640px;
  margin: auto;
}
.w100 {
  width: 100%;
}
.hide {
  display: none;
}
.fl,
.pull-left {
  float: left;
}
.fr,
.pull-right {
  float: right;
}
.clear {
  clear: both;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}
.ftleft {
  text-align: left;
}
.thisimg img {
  width: 100%;
}
.ct {
  margin: auto;
}
.mt3 {
  margin-top: 3px;
}
.mt5 {
  margin-top: 5px;
}
.mt6 {
  margin-top: 6px;
}
.mt,
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt0 {
  margin-top: 0;
}
.mr3 {
  margin-right: 3px;
}
.mr5 {
  margin-right: 5px;
}
.mr6 {
  margin-right: 6px;
}
.mr,
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.ml3 {
  margin-left: 3px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb,
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.ml5 {
  margin-left: 5px;
}
.ml,
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pr5 {
  padding-right: 5px;
}
.pr,
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb20 {
  padding-bottom: 20px;
}
.pl5 {
  padding-left: 5px;
}
.pl,
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pad5 {
  padding: 5px;
}
.pad10 {
  padding: 10px;
}
.pad15 {
  padding: 15px;
}
.pad20 {
  padding: 20px;
}
.ft10 {
  font-size: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.84);
  *font-size: 10px;
}
.ft12 {
  font-size: 12px;
}
.ft13 {
  font-size: 13px;
}
.ft14 {
  font-size: 14px;
}
.ft15 {
  font-size: 15px;
}
.ft16 {
  font-size: 16px;
}
.ft18 {
  font-size: 18px;
}
.ft20 {
  font-size: 20px;
}
.ft24 {
  font-size: 24px;
}
.ft30 {
  font-size: 30px;
}
.noblod,
b {
  font-weight: 400;
}
.bdt {
  border-top: 1px solid #e5e5e5;
}
.rela,
.relative {
  position: relative;
}
.abs {
  position: absolute;
}
.fixed {
  position: fixed;
}
.dib {
  display: inline-block;
}
.c000 {
  color: #000;
}
.afff,
.cfff {
  color: #fff;
}
.cf60 {
  color: #f60;
}
.cred {
  color: red;
}
.c333 {
  color: #333;
}
.c666 {
  color: #666;
}
.c999 {
  color: #999;
}
.c444 {
  color: #444;
}
.c89 {
  color: #898989;
}
.zcolor {
  color: #459d36;
}
.cgreen {
  color: #51c62c;
}
.cblue {
  color: #0ca4ed;
}
.cpink {
  color: #fe4aa7;
}
.c93c {
  color: #e3393c;
}
.c300 {
  color: #78b300;
}
.cf0 {
  color: #ff5757;
}
.linke:active {
  background: #f5f5f5;
}
.a666 {
  color: #666;
}
.a666:active {
  color: #333;
}
.imgBox img {
  width: 100%;
  display: block;
}
.bbd {
  border-bottom: 1px solid #ddd;
}
.textover {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}
.bgfff {
  background: #fff;
}
.bgmcolor {
  background: #459d36;
}
.bgf5 {
  background: #f5f5f5;
}
.bgaf {
  background: #afafaf;
}
.bg58 {
  background: #ea5858;
}
.tc-bg {
  background: rgba(0, 0, 0, 0.85);
}
.flex-dib {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-nowrap {
  white-space: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-pc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-pj {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.flex-pe {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.flex-ac {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-ae {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.flex-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.it1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.it1,
.it2 {
  display: block;
  min-width: 0;
}
.it2 {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
.it3 {
  -webkit-box-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
.it3,
.it5 {
  display: block;
  min-width: 0;
}
.it5 {
  -webkit-box-flex: 5;
  -ms-flex: 5;
  flex: 5;
}
.it6 {
  -webkit-box-flex: 6;
  -ms-flex: 6;
  flex: 6;
  display: block;
  min-width: 0;
}
.left0 {
  left: 0;
}
</style>